<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<th:block th:include="common/head :: head('登录')"/>
<style>
    body {
        background: url(img/login_bg.jpg) no-repeat;
        background-size: cover;
    }
    .index-header-menus, .index-header-gray, .index-header-search {
        display: none;
    }
    .index-header-main__back {
        display: block;
    }
    .index-header {
        box-shadow: none;
    }
    .index-header-bg {
        display: none;
    }

    .login-block {
        min-height: 800px;
        width: 1080px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding-top: 40px;
    }

    .login-block-logo {
        width: 380px;
        margin-right: 100px;
    }
    .login-block-logo img {
        width: 100%;
    }

    .login-wrap {
        width: 315px;
        border-radius: 15px;
        background: #FFF;
    }

    .login-wrap-head {
        display: flex;
        background: #856cf2;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        color: #FFF;
    }
    .login-wrap-head-item {
        flex: 1;
        height: 38px;
        line-height: 38px;
        font-weight: 500;
        font-style: normal;
        font-size: 16px;
        text-align: center;
        cursor: pointer;
        border-bottom: 1px solid #797979;
    }
    .login-wrap-head-item + .login-wrap-head-item {
        border-left: 1px solid #797979;
    }
    .is-active {
        border-bottom: none;
    }
    .login-wrap-content {
        padding: 10px;
    }
    .login-wrap-bottom {
        display: flex;
        justify-content: space-between;
        padding: 0 30px 20px;
    }
    .form-control {
        height: 24px;
    }
    .btn-success {
        height: 28px;
        line-height: 27px;
        font-size: 12px;
        background-color: #856cf2;
        border-color: #856cf2;
        display: block;
        margin: 20px auto;
        width: auto;
        padding: 0 40px;
        border-radius: 20px;
    }
    label.error {
        top: 12px;
    }
    .code-btn {
        width: 100%;
        font-size: 10px;
        background-color: #53c8ce;
        display: inline-block;
        height: 22px;
        text-align: center;
        line-height: 22px;
        margin-top: 5px;
        border-radius: 20px;
        cursor: pointer;
        color: #FFF;
    }
    .m-t {
        margin-top: 10px;
    }

</style>
<body>
    <th:block th:include="common/head :: header('/')"/>

    <div class="login-block">
        <div class="login-block-logo">
            <img src="/img/login.png" />
        </div>
        <div class="login-wrap">
            <div class="login-wrap-head">
                <div class="login-wrap-head-item is-active" refer="loginWrap2">验证码登录</div>
            </div>
            <div class="login-wrap-content" id="loginWrap2" >
                <form id="loginForm2">
                    <div class="row m-t">
                        <div class="col-xs-12">
                            <input type="text" name="username" class="form-control uname"     placeholder="手机号" value=""    />
                        </div>
                    </div>
                    <div class="row m-t">
                        <div class="col-xs-7">
                            <input type="text" name="verifyCode1" class="form-control uname"     placeholder="图形验证码" value=""    />
                        </div>
                        <div class="col-xs-5">
                            <a href="javascript:void(0);" title="点击更换验证码">
                                <img th:src="@{/captcha/captchaImage(type=${captchaType})}" class="imgcode" style="height: 24px;"/>
                            </a>
                        </div>
                    </div>
                    <div class="row m-t">
                        <div class="col-xs-7">
                            <input type="text" name="verifyCode" class="form-control uname"     placeholder="短信验证码" value=""    />
                        </div>
                        <div class="col-xs-5">
                            <div class="code-btn" id="codeBtn">获取短信验证码</div>
                        </div>
                    </div>

                    <button  class="btn btn-success btn-block" id="btnSubmit2" data-loading="正在验证登录，请稍候...">登录</button>

                </form>
            </div>
            <div class="login-wrap-bottom">
                <a href="/password">忘记密码</a>
                <a href="/register">注册</a>
            </div>
        </div>
    </div>

    <th:block th:include="common/head :: footer" />
    <th:block th:include="include :: footer" />
</body>
<script>
    $(function() {
        $('.imgcode').click(function() {
            var url = ctx + "captcha/captchaImage?type=math&s=" + Math.random();
            $(".imgcode").attr("src", url);
        });

        $('.login-wrap-head-item').on('click', function() {
            $('.login-wrap-head-item').removeClass('is-active');
            $(this).addClass('is-active')
            const refer = $(this).attr('refer');

            $('.login-wrap-content').hide();
            $('#'+refer).show();
        })

        $('#codeBtn').click(function() {
            if($(this).hasClass('loading')) {
                return false;
            }
            const validateCode = $('#loginForm2 input[name="verifyCode1"]').val();
            const username = $('#loginForm2 input[name="username"]').val();

            if($.common.trim(validateCode) == '') {
                $.modal.msgError('请输入图形验证码')
                return
            }
            if($.common.trim(username) == '') {
                $.modal.msgError('请输入手机号')
                return
            }
            if(!validatePhone(username)) {
                $.modal.msgError('请输入正确手机号')
                return
            }

            $.ajax({
                type: 'post',
                url: ctx + 'phoneCode',
                data: {
                    validateCode: validateCode,
                    username: username,
                    type: 'login'
                },
                dataType: 'json',
                success: function(res) {

                    if(res.code === 0) {
                        $.modal.msgSuccess('验证码发送成功!')
                        setBtnTimer('codeBtn', '获取短信验证码')
                    } else {
                        $('#loginForm2 .imgCode').click()
                        $.modal.msg(res.msg)
                    }
                }
            })


        })

        function setBtnTimer(id, text) {
            const el = $('#' + id)
            el.addClass('loading')
            let max = 60

            const timer = setInterval(() => {
                if(max > 0) {
                    el.html(max + 's')
                    max--
                } else {
                    clearInterval(timer)
                    el.removeClass('loading')
                    el.html(text)
                }

            }, 1000)
        }

        $("#loginForm1").validate({
            rules: {
                username: {
                    required: true
                },
                password: 'required',
                verifyCode: "required"
            },
            messages: {
                username: {
                    required: "请输入账号或手机号"
                },
                password: '请输入密码',
                verifyCode: "请输入短信验证码"
            },
            submitHandler: function() {
                doLogin()
            }
        });

        $("#loginForm2").validate({
            rules: {
                username: "required",
                password: "required",
                validateCode: "required"
            },
            messages: {
                username: "请输入手机号",
                password: "请输入密码",
                validateCode: "请输入验证码"
            },
            submitHandler: function() {
                doLogin2()
            }
        });
    })

    // 密码登录
    function doLogin() {
        $.modal.loading($("#btnSubmit1").data("loading"));
        var username = $.common.trim($("#loginForm1 input[name='username']").val());
        var password = $.common.trim($("#loginForm1 input[name='password']").val());
        var validateCode = $.common.trim($("#loginForm1 input[name='validateCode']").val());

        const data = {
            username: username,
            password: password,
            validateCode: validateCode,
            rememberMe: true
        }
        $.ajax({
            url: ctx + "login",
            type: "POST",
            data: data,
            dataType: "json",
            success: function(r) {
                $.modal.closeLoading();

                if (r.code == web_status.SUCCESS) {
                    // location.href = ctx + 'main';
                     loginSuccess(username)
                } else {
                    $('#loginForm1 .imgcode').click();
                    $("#loginForm1 .code").val("");
                    $.modal.msg(r.msg);
                }
            }
        })
    }

    // 手机验证码登录
    function doLogin2() {
        $.modal.loading($("#btnSubmit2").data("loading"));
        var username = $.common.trim($("#loginForm2 input[name='username']").val());
        var code = $.common.trim($("#loginForm2 input[name='verifyCode']").val());

        $.ajax({
            url: ctx + "phoneLogin",
            type: "POST",
            data: {
                username: username,
                code: code
            },
            dataType: "json",
            success: function(r) {
                $.modal.closeLoading();
                if (r.code == web_status.SUCCESS) {
                    loginSuccess(username)
                } else {
                    $('#loginForm2 .imgcode').click();
                    $("#loginForm2 .code").val("");
                    $.modal.msg(r.msg);
                }
            }
        })
    }

    function validatePhone(phone) {
        return /^1[3456789]\d{9}$/.test(phone);
    }
    $.validator.addMethod('mobile', function(value, element) {
        return this.optional(element) || validatePhone(value);
    })

    const managers = ['admin', 'manager']

    function loginSuccess(username) {
        const request = getRequest()
        const redirect = request.redirect

        if(redirect === 'back') {
            window.location.href = document.referrer
        } else if(managers.includes(username)){
            window.location.href = ctx +'main'
        } else {
            window.location.href = ctx
        }
    }

</script>
</html>